<template>
    <div  class="loading-spinner">————— 我也是有底线的 ————— </div>
 
    <!-- <div v-if="isLoading" class="loading-spinner">我也是有底线的</div>
    <button v-else class="load-more-btn" @click="loadMore" :disabled="isLoading || !hasMore">
        {{ isLoading ? '加载中...' : hasMore ? '加载更多' : '没有更多了' }}
    </button> -->
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
    isLoading: {
        type: Boolean,
        default: false
    },
    hasMore: {
        type: Boolean,
        default: true
    },
    loadMoreData: {
        type: Function,
        required: true
    }
});

const loadMore = () => {
    if (!isLoading && hasMore) {
        props.loadMoreData(); // 调用父组件传递的加载更多方法
    }
};
</script>

<style scoped>
.loading-spinner {
    text-align: center;
    padding: 10px;
    color: #999999 ;
    font-size: 0.83vw;
}

.load-more-btn {
    /* width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px; */
}

.load-more-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
</style>